<template>
  <div class="tab">
    <div
      v-for="item in tabs"
      :key="item.value"
      class="item"
      :class="{ active: item.value === activeIndex }"
      @click="tabHandle(item.value)"
    >
      <el-badge :value="item.num" :max="99" :hidden="!item.num" class="num">
        {{ item.label }}
      </el-badge>
    </div>
  </div>
</template>
<script setup lang="ts">
import { OrderStatistics } from "@/types/order";
import { computed, nextTick, ref, watch } from "vue";
const props = defineProps<{
  orderStatistics: OrderStatistics;
}>();
const emit = defineEmits(["activeHandle"]);
watch(
  () => props.orderStatistics,
  (newVal) => {
    //nextTick可以确保在数据变化导致的 DOM 更新完成后执行特定的操作，帮助你处理异步操作与 DOM 更新的顺序，以及获取更新后的 DOM 状态。
    nextTick(() => {
      orderStatistics.value = newVal;
    });
  },
  // 立即执行一次
  { immediate: true }
);
const orderStatistics = ref(props.orderStatistics);
const activeIndex = ref(0);

const tabHandle = (value: number) => {
  activeIndex.value = value;
  emit("activeHandle", value);
};
const tabs = computed(() => [
  {
    label: "全部订单",
    value: 0,
  },
  {
    label: "待接单",
    value: 2,
    num: orderStatistics.value.toBeConfirmed || 0,
  },
  {
    label: "待派送",
    value: 3,
    num: orderStatistics.value.confirmed || 0,
  },
  {
    label: "派送中",
    value: 4,
    num: orderStatistics.value.deliveryInProgress || 0,
  },
  {
    label: "已完成",
    value: 5,
  },
  {
    label: "已取消",
    value: 6,
  },
]);
</script>
<style scoped lang="scss">
.tab {
  height: 40px;
  line-height: 40px;
  display: flex;
  font-size: 14px;
  text-align: center;
  .item {
    cursor: pointer;
    background: #fff;
    width: 120px;
    border-right: 1px solid #e5e4e4;
    .special-item {
      .el-badge__content {
        width: 20px;
        padding: 0 5px;
      }
    }
    .num {
      .el-badge__content {
        background-color: #fd3333 !important;
        line-height: 18px;
        height: auto;
        min-width: 18px;
        min-height: 18px;
      }
      .el-badge__content.is-fixed {
        top: 14px;
        right: 2px;
      }
    }
  }

  .active {
    font-weight: 700;
    background: #ffd04b;
  }
}
</style>
